import React, { useRef, useState, forwardRef, useMemo, useImperativeHandle } from 'react';
import { Image } from '@douyinfe/semi-ui';
import { useSelector } from 'react-redux';
import { selectCurrentImage, selectLayerImages } from '@/store';
import deleteIcon from "@/assets/images/imageEdit/delete.svg";
import download from "@/assets/images/imageEdit/download.svg";
import layerEditIcon from "@/assets/images/imageEdit/layer_edit_icon.svg";
import imageIcon from "@/assets/images/imageEdit/image_icon.svg";
import copy from "@/assets/images/imageEdit/copy.svg";
import styles from "./index.module.scss";
import CanvasDrawing from './CanvasDrawing';
import { RATIO_SIZES } from './constants';

const Results = forwardRef(({ 
  resultsItemRefs,
  currentMenuKey,
  currentMenuTitle,
  selectedTool,
  toolSize,
  selectedRatio, // 选中的画幅比例
  onPointSelectionChange, // 点选变化回调
  onGreenPointSelectionChange, // 绿色点变化回调
  onBrushStrokesChange, // 画笔笔触变化回调
  onRectSelectionChange, // 框选变化回调
 }, ref) => {
  const canvasDrawingRef = useRef(null);
  const imageWrapperRef = useRef(null); // 图片容器ref
  const currentImage = useSelector(selectCurrentImage);
  const layerImages = useSelector(selectLayerImages);
   

  
  // 图片编辑相关状态
  const [showCanvas, setShowCanvas] = useState(true); // 控制Canvas显示状态
  const [mediaTransform, setMediaTransform] = useState({}); // 媒体变换状态
  
  // 根据selectedTool计算eraseMode
  const eraseMode = useMemo(() => {
    switch(selectedTool) {
      case 'press': return 4; // 点选模式
      case 'brush': return 2; // 画笔模式
      case 'graphic': return 5; // 框选/橡皮擦模式
      default: return 1;
    }
  }, [selectedTool]);

  // 暴露方法给父组件
  useImperativeHandle(ref, () => ({
    clearCanvas: () => {
      if (canvasDrawingRef.current?.clearBrushStrokes) {
        canvasDrawingRef.current.clearBrushStrokes();
      }
    },
    getCanvasImage: () => {
      if (canvasDrawingRef.current?.getCanvasImage) {
        return canvasDrawingRef.current.getCanvasImage();
      }
      return null;
    },
    handleDownloadResizedImage: () => {
      if (canvasDrawingRef.current?.handleDownloadResizedImage) {
        return canvasDrawingRef.current.handleDownloadResizedImage();
      } else {
        console.error('CanvasDrawing组件的handleDownloadResizedImage方法不可用');
      }
    },
    setSelectedImage: (imageKey) => {
      if (canvasDrawingRef.current?.setSelectedImage) {
        canvasDrawingRef.current.setSelectedImage(imageKey);
      }
    }
  }), []);

  const resultsData = [
    {
      title: currentMenuTitle,
      quality: "2K",
      ratio: "1:1",
      time: "2025/07/19 14:13",
      content: "3D图标，多种设计，图标顺序依次是：钢厂、基地、厂家、代理、码头，适用于UI，重点是钢厂基地采用工厂类元素，码头是以龙门吊之类的元素，代理商是以人物为主的元素，使用柔和的橡皮泥风格，背景为白色，风格参考Dribbble，高分辨率，以红色为主，黄色为辅，光线柔和。"
    },
    {
      title: currentMenuTitle,
      quality: "2K",
      ratio: "16:9",
      time: "2025/07/19 14:13",
      content: "3D图标，多种设计，图标顺序依次是：钢厂、基地、厂家、代理、码头，适用于UI，重点是钢厂基地采用工厂类元素，码头是以龙门吊之类的元素，代理商是以人物为主的元素，使用柔和的橡皮泥风格，背景为白色，风格参考Dribbble，高分辨率，以红色为主，黄色为辅，光线柔和。"
    },
    {
      title: currentMenuTitle,
      quality: "2K",
      ratio: "1:1",
      time: "2025/07/19 14:13",
      content: "3D图标，多种设计，图标顺序依次是：钢厂、基地、厂家、代理、码头，适用于UI，重点是钢厂基地采用工厂类元素，码头是以龙门吊之类的元素，代理商是以人物为主的元素，使用柔和的橡皮泥风格，背景为白色，风格参考Dribbble，高分辨率，以红色为主，黄色为辅，光线柔和。"
    },
    {
      title: currentMenuTitle,
      quality: "2K",
      ratio: "16:9",
      time: "2025/07/19 14:13",
      content: "3D图标，多种设计，图标顺序依次是：钢厂、基地、厂家、代理、码头，适用于UI，重点是钢厂基地采用工厂类元素，码头是以龙门吊之类的元素，代理商是以人物为主的元素，使用柔和的橡皮泥风格，背景为白色，风格参考Dribbble，高分辨率，以红色为主，黄色为辅，光线柔和。"
    },
    {
      title: currentMenuTitle,
      quality: "2K",
      ratio: "1:1",
      time: "2025/07/19 14:13",
      content: "3D图标，多种设计，图标顺序依次是：钢厂、基地、厂家、代理、码头，适用于UI，重点是钢厂基地采用工厂类元素，码头是以龙门吊之类的元素，代理商是以人物为主的元素，使用柔和的橡皮泥风格，背景为白色，风格参考Dribbble，高分辨率，以红色为主，黄色为辅，光线柔和。"
    },
    {
      title: currentMenuTitle,
      quality: "2K",
      ratio: "16:9",
      time: "2025/07/19 14:13",
      content: "3D图标，多种设计，图标顺序依次是：钢厂、基地、厂家、代理、码头，适用于UI，重点是钢厂基地采用工厂类元素，码头是以龙门吊之类的元素，代理商是以人物为主的元素，使用柔和的橡皮泥风格，背景为白色，风格参考Dribbble，高分辨率，以红色为主，黄色为辅，光线柔和。"
    },
    {
      title: currentMenuTitle,
      quality: "2K",
      ratio: "1:1",
      time: "2025/07/19 14:13",
      content: "3D图标，多种设计，图标顺序依次是：钢厂、基地、厂家、代理、码头，适用于UI，重点是钢厂基地采用工厂类元素，码头是以龙门吊之类的元素，代理商是以人物为主的元素，使用柔和的橡皮泥风格，背景为白色，风格参考Dribbble，高分辨率，以红色为主，黄色为辅，光线柔和。"
    },
    {
      title: currentMenuTitle,
      quality: "2K",
      ratio: "16:9",
      time: "2025/07/19 14:13",
      content: "3D图标，多种设计，图标顺序依次是：钢厂、基地、厂家、代理、码头，适用于UI，重点是钢厂基地采用工厂类元素，码头是以龙门吊之类的元素，代理商是以人物为主的元素，使用柔和的橡皮泥风格，背景为白色，风格参考Dribbble，高分辨率，以红色为主，黄色为辅，光线柔和。"
    },
  ];

  const renderResultsImgItem = () => (
    <div className={styles.resultsImgItem}>
      <div className={styles.maskLayer}>
        <div className={styles.maskTool}>
          <Image className={styles.maskLayerImg} src={deleteIcon} preview={false} draggable={false} />
          <Image className={styles.maskLayerImg} src={download} preview={false} draggable={false} />
        </div>
        <div className={styles.maskEdit}>
          <div className={styles.maskleft}>
            <Image className={styles.maskLayerImg} src={layerEditIcon} preview={false} draggable={false} />
            <div>图层编辑</div>
          </div>
          <div className={styles.maskSeparate}></div>
          <div className={styles.maskRight}>
            <Image className={styles.maskLayerImg} src={imageIcon} preview={false} draggable={false} />
            <div>图像编辑</div>
          </div>
        </div>
      </div>
      <Image className={styles.img} src={''} preview={false} draggable={false} />
    </div>
  );

  return (
    <div className={styles.results} ref={ref}>
      {['text','pic','multi'].includes(currentMenuKey)&&resultsData.map((item, index) => (
        <div key={index} className={styles.resultsItem} ref={el => resultsItemRefs.current[index] = el}>
          <div className={styles.resultsHead}>
            <div className={styles.resultsHeadLeft}>
              <div className={styles.resultsHeadTitle}>{item.title}</div>
              <div className={styles.separate}></div>
              <div className={styles.resultsHeadText}>
                <div className={styles.tabText}>{item.quality}</div>
                <div className={styles.tabText}>{item.ratio}</div>
                {currentMenuKey=='pic'&&<div className={styles.thumbnail}>
                  <Image className={styles.img} src={''} preview={false} draggable={false} />
                  <span>参考图</span>
                </div>}
              </div>
            </div>
            <div className={styles.resultsHeadTime}>{item.time}</div>
          </div>
          <div className={styles.resultsContent}>
            {item.content}
            <Image className={styles.img} src={copy} preview={false} draggable={false} />
          </div>
          <div className={styles.resultsImgList}>
            {Array.from({ length: 4 }, (_, imgIndex) => (
              <div key={imgIndex}>{renderResultsImgItem()}</div>
            ))}
          </div>
        </div>
      ))}
      {currentMenuKey === 'image' && currentImage && <div className={styles.resultsSingle}>
        <div ref={imageWrapperRef} style={{width:'100%',height:'100%',position: 'relative',overflow: 'hidden'}}>
          <CanvasDrawing 
            ref={canvasDrawingRef}
            eraseMode={eraseMode}
            toolSize={toolSize}
            onMediaStyleChange={setMediaTransform} // 接收样式变化通知
            onPointSelectionChange={onPointSelectionChange} // 点选变化回调
            onGreenPointSelectionChange={onGreenPointSelectionChange} // 绿色点变化回调
            onBrushStrokesChange={onBrushStrokesChange} // 画笔笔触变化回调
            onRectSelectionChange={onRectSelectionChange} // 框选变化回调
            hideDisplayCanvas={!showCanvas} // 控制显示Canvas的可见性，但保留离屏Canvas
            mediaWrapperRef={imageWrapperRef} // 传递图片容器ref
            mediaElementId={currentImage ? 'current-image' : null} // 媒体元素ID
            enableProcessing={true} // 根据当前菜单键决定是否启用处理功能
          />
          <div id="current-image">
            <Image
              className={styles.img}
              src={currentImage} 
              preview={false} 
              draggable={false}
              style={{
                ...mediaTransform,
                transform: `${mediaTransform.transform || ''}`,
                position: 'absolute',
                zIndex: 1
              }}
            />
          </div>
        </div>
      </div>}
      {currentMenuKey === 'layer' && layerImages.length > 0 && <div className={styles.resultsSingle}>
        <div ref={imageWrapperRef} style={{width:'100%',height:'100%',position: 'relative',overflow: 'hidden'}}>
          <CanvasDrawing 
            ref={canvasDrawingRef}
            eraseMode={eraseMode}
            toolSize={toolSize}
            onMediaStyleChange={setMediaTransform} // 接收样式变化通知
            onPointSelectionChange={onPointSelectionChange} // 点选变化回调
            onGreenPointSelectionChange={onGreenPointSelectionChange} // 绿色点变化回调
            onBrushStrokesChange={onBrushStrokesChange} // 画笔笔触变化回调
            onRectSelectionChange={onRectSelectionChange} // 框选变化回调
            hideDisplayCanvas={!showCanvas} // 控制显示Canvas的可见性，但保留离屏Canvas
            mediaWrapperRef={imageWrapperRef} // 传递图片容器ref
            mediaElementId="current-image" // 媒体元素ID
            enableProcessing={true} // 根据当前菜单键决定是否启用处理功能
            selectedRatio={RATIO_SIZES[selectedRatio]} // 传递画幅比例尺寸值
          />
          <div id="current-image" style={{position:'absolute',width:'100%',height:'100%',zIndex:5}}>
            {layerImages.map((item, index) => {
               const layerKey = `layer-${item.id}`;
               const layerStyle = mediaTransform.layerStyles?.[layerKey] || {};
               return (
                 <Image
                   key={layerKey}
                   data-key={layerKey}
                   src={item.src} 
                   preview={false} 
                   draggable={false}
                   style={{
                     ...mediaTransform,
                     ...layerStyle, // 应用每个图层的独立样式
                     display:layerStyle.width?'':'none',
                     transform: `${mediaTransform.transform || ''} translate(${(mediaTransform.imagePositions?.[layerKey]?.x || 0)}px, ${(mediaTransform.imagePositions?.[layerKey]?.y || 0)}px)`,
                     position: 'absolute',
                     zIndex: index,
                     left: '50%',
                     top: '50%',
                     // 如果有独立的宽高，需要重新计算居中位置
                     marginLeft: layerStyle.width ? -layerStyle.width / 2 : '-50%',
                     marginTop: layerStyle.height ? -layerStyle.height / 2 : '-50%'
                   }}
                 />
               );
              })}
          </div>
        </div>
      </div>}
    </div>
  );
});

Results.displayName = 'Results';

export default Results;